import React, { PureComponent } from 'react';
import { Card, Avatar, Icon, Tag, List, Row, Col } from 'antd';
import Link from 'umi/link';
import numeral from 'numeral';
import styles from '../../styles.less'
import resource from '../../resource';
 

import iconfont from '@/assets/iconfont/iconfont.js'


// 设备测点信息
class DeviceParameter  extends PureComponent {

    render() {


        const iconfonts = [
            "icon-drag"



            , "icon-ellipsis-vertical"



            , "icon-gallery-view"



            , "icon-qrcode"



            , "icon-cut"



            , "icon-all"



            , "icon-align-right"



            , "icon-align-left"



            , "icon-border-bottom"



            , "icon-border-top"



            , "icon-align-center"



            , "icon-border-verticle"



            , "icon-pic-center"



            , "icon-pic-side"


        ]

        const IconFont = Icon.createFromIconfontCN({
            scriptUrl: {iconfont},
          });

        const parameters = [
            {
                "code": 1148855701968257000,
                "deviceCode": 1148784465791680500,
                "name": "功率",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702060531700,
                "deviceCode": 1148784465791680500,
                "name": "流量",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702098280400,
                "deviceCode": 1148784465791680500,
                "name": "测点1",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702136029200,
                "deviceCode": 1148784465791680500,
                "name": "测点2",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702186360800,
                "deviceCode": 1148784465791680500,
                "name": "测点3",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702228303900,
                "deviceCode": 1148784465791680500,
                "name": "测点4",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            }
        ];
        return (
        <Row gutter={24} style={{ marginBottom: 16 }} align="bottom" >
             <Col sm={24} xs={24} md={8}>
             <List size="small" >
                        {
                            parameters.map((item, index) => {
                                return (
                                    <List.Item >
                                        <span>

                                            <span className={styles.spanStyle} style={{ height: '25px' }} > <IconFont type={iconfonts[index % iconfonts.length]} /> {item.name} </span>
                                            <span className={styles.spanStyle} style={{ height: '25px' }}> {numeral(2000).format('0,0')}   <small>{item.unit}</small> </span>


                                        </span>
                                    </List.Item>)
                            })
                        }                 
                </List>
            </Col>
            <Col sm={24} xs={24} md={8}>
                <List size="small" >
                        {
                            parameters.map((item, index) => {
                                return (
                                    <List.Item >
                                        <span>

                                            <span className={styles.spanStyle} style={{ height: '25px' }} > <IconFont type={iconfonts[index % iconfonts.length]} /> {item.name} </span>
                                            <span className={styles.spanStyle} style={{ height: '25px' }}> {numeral(2000).format('0,0')}   <small>{item.unit}</small> </span>


                                        </span>
                                    </List.Item>)
                            })
                        }                 
                </List>
            </Col>
            <Col sm={24} xs={24} md={8}>
            <List size="small" >
                        {
                            parameters.map((item, index) => {
                                return (
                                    <List.Item >
                                        <span>

                                            <span className={styles.spanStyle} style={{ height: '25px' }} > <IconFont type={iconfonts[index % iconfonts.length]} /> {item.name} </span>
                                            <span className={styles.spanStyle} style={{ height: '25px' }}> {numeral(2000).format('0,0')}   <small>{item.unit}</small> </span>


                                        </span>
                                    </List.Item>)
                            })
                        }                 
                </List>
            </Col>
        </Row>
    
);
    }
}


export default  DeviceParameter;